{% extends "base.html" %}

{% block title %}课程表 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .schedule-container {
        overflow-x: auto;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .schedule-table {
        width: 100%;
        border-collapse: collapse;
    }
    .schedule-table th {
        background-color: #f8f9fa;
        font-weight: 600;
        text-align: center;
        border: 1px solid #e9ecef;
        padding: 0.75rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .schedule-table td {
        border: 1px solid #e9ecef;
        padding: 0;
        height: 80px;
        vertical-align: top;
        position: relative;
    }
    .time-slot {
        font-size: 0.875rem;
        color: #6c757d;
        position: sticky;
        left: 0;
        background-color: white;
        z-index: 5;
        padding: 0.5rem;
        min-width: 80px;
        text-align: center;
    }
    .course-item {
        padding: 0.5rem;
        margin: 0.25rem;
        border-radius: 4px;
        height: calc(100% - 0.5rem);
        overflow: hidden;
        position: relative;
    }
    .course-item .course-name {
        font-weight: 500;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .course-item .course-info {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .current-week-indicator {
        background-color: #0d6efd;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.875rem;
    }
    .week-nav {
        display: flex;
        align-items: center;
    }
    .week-nav button {
        margin: 0 0.5rem;
    }
    .calendar-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1rem;
    }
    .legend-item {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
    }
    .legend-color {
        width: 16px;
        height: 16px;
        border-radius: 4px;
        margin-right: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="text-2xl font-bold text-gray-800">
                    <i class="fa fa-calendar mr-2 text-primary"></i>课程表
                </h1>
                <div class="d-flex align-items-center">
                    <!-- 学期选择 -->
                    <div class="mr-4">
                        <select id="semester-select" class="form-select" onchange="changeSemester(this.value)">
                            {% for semester in semesters %}
                            <option value="{{ semester }}" {% if current_semester == semester %}selected{% endif %}>{{ semester }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <!-- 周次导航 -->
                    <div class="week-nav">
                        <button class="btn btn-outline-secondary btn-sm" onclick="changeWeek(-1)">
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <span id="current-week-display" class="current-week-indicator">
                            第 {{ current_week }} 周
                        </span>
                        <button class="btn btn-outline-secondary btn-sm" onclick="changeWeek(1)">
                            <i class="fa fa-chevron-right"></i>
                        </button>
                        <button class="btn btn-primary btn-sm ml-2" onclick="goToToday()">
                            今天
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 课程表 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="schedule-container">
                <table class="schedule-table">
                    <thead>
                        <tr>
                            <th class="time-slot"></th>
                            {% for day in days %}<th>{{ day }}</th>{% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for time_slot in time_slots %}
                        <tr>
                            <td class="time-slot">{{ time_slot.start_time }}-{{ time_slot.end_time }}</td>
                            {% for day in days %}
                                {% set key = day + '-' + time_slot.id %}
                                {% set courses_in_slot = schedule.get(key, []) %}
                                <td>
                                    {% if courses_in_slot %}
                                        {% for course in courses_in_slot %}
                                        <div class="course-item" style="background-color: {{ course_color_map.get(course.id, '#e3f2fd') }}; color: {{ get_text_color(course_color_map.get(course.id, '#e3f2fd')) }}">
                                            <div class="course-name">{{ course.name }}</div>
                                            <div class="course-info">{{ course.teacher }}</div>
                                            <div class="course-info">{{ course.location }}</div>
                                        </div>
                                        {% endfor %}
                                    {% endif %}
                                </td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- 图例 -->
            <div class="calendar-legend">
                <h5 class="font-medium text-gray-700 mr-2">课程颜色：</h5>
                {% for course in all_courses %}
                <div class="legend-item">
                    <div class="legend-color" style="background-color: {{ course_color_map.get(course.id, '#e3f2fd') }}"></div>
                    <span>{{ course.name }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- 今日课程 -->
<div class="row">
    <div class="col-12">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fa fa-calendar-check-o mr-2 text-primary"></i>今日课程
            </h2>
            
            <div class="today-courses">
                {% if today_courses %}
                    <div class="row">
                        {% for course in today_courses %}
                        <div class="col-md-3 mb-4">
                            <div class="p-4 rounded-lg" style="background-color: {{ course_color_map.get(course.id, '#e3f2fd') }}; color: {{ get_text_color(course_color_map.get(course.id, '#e3f2fd')) }}">
                                <div class="font-bold text-lg mb-2">{{ course.name }}</div>
                                <div class="mb-1"><i class="fa fa-clock-o mr-1"></i>{{ course.time }}</div>
                                <div class="mb-1"><i class="fa fa-map-marker mr-1"></i>{{ course.location }}</div>
                                <div><i class="fa fa-user-o mr-1"></i>{{ course.teacher }}</div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-8">
                        <i class="fa fa-check-circle text-4xl text-green-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-600 mb-2">今天没有课程</h3>
                        <p class="text-gray-500">好好休息，享受你的空闲时间吧！</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 当前周次
    let currentWeek = {{ current_week }};
    
    // 切换学期
    function changeSemester(semester) {
        window.location.href = '{{ url_for('course_schedule') }}?semester=' + semester;
    }
    
    // 切换周次
    function changeWeek(delta) {
        const newWeek = currentWeek + delta;
        // 确保周次在合理范围内
        if (newWeek >= 1 && newWeek <= 20) {
            currentWeek = newWeek;
            updateWeekDisplay();
            loadWeekSchedule(currentWeek);
        }
    }
    
    // 更新周次显示
    function updateWeekDisplay() {
        document.getElementById('current-week-display').textContent = '第 ' + currentWeek + ' 周';
    }
    
    // 跳转到今天
    function goToToday() {
        // 这里应该跳转到今天所在的周次
        window.location.href = '{{ url_for('course_schedule') }}?week=today';
    }
    
    // 加载指定周的课程表
    function loadWeekSchedule(week) {
        // 这里应该通过AJAX加载指定周的课程表数据
        // 为了简化，这里只是重新加载页面
        window.location.href = '{{ url_for('course_schedule') }}?week=' + week;
    }
    
    // 添加课程单元格点击事件
    document.addEventListener('DOMContentLoaded', function() {
        const courseCells = document.querySelectorAll('.schedule-table td:not(.time-slot)');
        courseCells.forEach(cell => {
            // 只有当单元格为空时才添加点击事件
            if (cell.children.length === 0) {
                cell.style.cursor = 'pointer';
                cell.title = '点击添加课程';
                cell.addEventListener('click', function() {
                    const timeSlot = this.parentElement.querySelector('.time-slot').textContent;
                    const day = this.parentElement.parentElement.querySelector('th').textContent;
                    alert(`您点击了${day} ${timeSlot}的时间段\n\n后续版本将支持在此处直接添加课程。`);
                });
            }
        });
        
        // 添加课程项悬停效果
        const courseItems = document.querySelectorAll('.course-item');
        courseItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.02)';
                this.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)';
                this.style.transition = 'transform 0.2s ease, box-shadow 0.2s ease';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
                this.style.boxShadow = 'none';
            });
            
            item.addEventListener('click', function() {
                const courseName = this.querySelector('.course-name').textContent;
                // 查找对应的课程ID
                let courseId = null;
                {% for course in all_courses %}
                    if ('{{ course.name }}' === courseName) {
                        courseId = {{ course.id }};
                    }
                {% endfor %}
                
                if (courseId) {
                    window.location.href = '{{ url_for('course_detail', course_id='') }}' + courseId;
                }
            });
        });
    });
</script>
{% endblock %}